import { ColorObject, ColorPicker as TdPicker } from 'tdesign-react';
import './ColorPicker.less';
import { UIContainer, UIContainerProps } from '../ui-container/UIContainer';
import { useState } from 'react';
import { Color } from 'tvision-color/dist/esm/src/color';

interface ColorPickerProps extends UIContainerProps {
  value?: string;
  defaultValue?: string;
  showText?: boolean;
  disabled?: boolean;
  onChange?: (color: string) => void;
}

export default function ColorPicker(props: ColorPickerProps) {
  const { value, defaultValue, showText, disabled, onChange, ...containerProps } = props;
  const controlled = value !== undefined && defaultValue === undefined;
  const [stateValue, setStateValue] = useState(controlled ? value : defaultValue);
  const finalValue = controlled ? value : stateValue;

  const onChangeComplete = (color: string) => {
    onChange && onChange(color);
    if (!controlled) setStateValue(color);
  };

  return (
    <UIContainer {...containerProps} className={'lc-color-pick'}>
      <TdPicker format={'HEX'} disabled={disabled} value={finalValue} onChange={onChangeComplete} />
      {showText && <span className={'text-area'}>{finalValue?.toUpperCase()}</span>}
    </UIContainer>
  );
}

// class ColorPicker extends Component<ColorPickerProps> {
//
//     control: boolean = true;
//
//     state = {
//         value: ''
//     }
//
//     constructor(props: ColorPickerProps) {
//         super(props);
//         const {value, defaultValue} = props;
//         this.control = !defaultValue && !!value;
//         this.state = {value: defaultValue || value || '#00e9ff'};
//     }
//
//     onChangeComplete = (color: Color) => {
//         const {onChange} = this.props;
//         const value = color.toHexString();
//         onChange && onChange(value);
//         if (!this.control) {
//             this.setState({value});
//         }
//     };
//
//     render() {
//         const color = this.control ? this.props.value : this.state.value;
//         const {disabled, tip, label, showText} = this.props;
//         return (
//             <UIContainer tip={tip} label={label} className={'lc-color-pick'}>
//                 <AntdColorPicker
//                     size={'small'}
//                     format={'hex'}
//                     disabled={disabled}
//                     value={color}
//                     onChangeComplete={this.onChangeComplete}
//                 />
//                 {showText && <span className={'text-area'}>{color?.toUpperCase()}</span>}
//             </UIContainer>
//         );
//     }
// }
//
// export default ColorPicker;
